<template>
  <div>
      <div class="wrapper">
         <ul class="goods_box">
             <li class="border-bottom-1px" v-for="(item,index) in storedata">
                 <div class="goods_img">
                     <img v-if="item.thumbs[0]" :src="item.thumbs[0].thumb" alt="">
                 </div>
                 <div class="fl">
                     <h3 class="goods_name">{{item.name}}</h3>
                     <div>
                         <!-- <span class="goods_lable">领券更优惠</span> -->
                     </div>
                     <div>
                         <p class="price"><em>&yen;</em>{{item.price}}
                             <span class="old_price"><em>&yen;</em>{{item.old_price}}</span>
                         </p>
                         <!-- <div class="daohang_icon" :style="daohang_icon">
                         </div> -->
                     </div>
                 </div>
             </li>
         </ul>
      </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
            daohang_icon:{
                backgroundImage: "url(" + require("../assets/product_share_icon@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            }
        }
    },
    props:{
      'storedata':Array,
    },
    methods:{

    }
}
</script>
<style scoped>
.wrapper{
    background: #FFFFFF;
    overflow: hidden;
}
.goods_box{
    margin: 0 .64rem;
}
.goods_box li{
    padding:.8rem 0 .64rem 0;
    display: flex;
}
.goods_box .border-bottom-1px::after{
    border-bottom-color: #F5F5F5;
}
.goods_box li .goods_img{
    width:3.2rem;
    height:3.2rem;
    background:rgba(245,245,245,1);
    border-radius:.2rem;
    flex:none;
}
.goods_box li .goods_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius:.2rem;
}
.goods_box li .fl{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    padding-left: .66rem;
    position: relative;
}
.goods_box li .fl .goods_name{
    font-size: .64rem;
    color: #292929;
    font-weight: bold;
}
.goods_box li .fl .goods_lable{
    display: inline-block;
    padding: .1rem .26rem .08rem .26rem;
    background:rgba(255,247,233,1);
    border:1px solid rgba(251,69,69,1);
    border-radius:.2rem;
    margin-right: .2rem;
    font-size: .48rem;
    color: #FB4545;
    font-weight: 500;
}
.goods_box li .fl .price{
    font-size: .72rem;
    color: #FB4545;
    font-weight: 500;
    margin-bottom: .1rem;
}
.goods_box li .fl .price>em{
    font-size: .56rem;
    color: #FB4545;
    font-weight: 500;
    margin-right: .1rem;
}
.goods_box li .fl .old_price{
    font-size: .48rem;
    color: #AEAEAE;
    font-weight: 500;
    text-decoration:line-through;
    margin-left: .2rem;
}
.goods_box li .fl .old_price>em{
    font-size: .28rem;
    color: #AEAEAE;
    font-weight: 500;
    margin-right: .1rem;
}
.goods_box li .fl .daohang_icon{
    width: 1.12rem;
    height: 1.12rem;
    position: absolute;
    right: 0;
    bottom: 0
}
</style>
